import './orderCheck.less';
import { View, ScrollView, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import NavigationBar from '../../NavigationBar/NavigationBar';
import NavigationPlace from '../../NavigationBar/NavigationPlace';
import '../../fonts/remixicon.less';
import { useState, useEffect } from 'react';
import { AtCountdown } from 'taro-ui'
import { useHistory, useLocation } from 'react-router-dom';
import { getCurrentInstance } from '@tarojs/taro'

function orderCheck(props) {
    // 显示 判断标题
    const change = () => {
        if (tit == '待付款') {
            return (
                <AtCountdown
                    format={{ minutes: ':', seconds: '' }}
                    minutes={59}
                    seconds={60}
                />
            )
        } else if (tit == '待发货' || tit == '待收货') {
            return (
                <Text>申请售后</Text>
            )
        } else {
            return (
                <Text></Text>
            )
        }
    }
    // 倒计时函数
    const onTimeUp = () => {
        Taro.showToast({
            title: '时间到',
            icon: 'success',
            duration: 500
        })
    }
    // 设置标题
    const [tit, setTit] = useState('');
    // 渲染内容
    const data2 = [
        {
            src: "http://img.qincore.cn/2021/08/16/c26ecdb6b7d56.png",
            name: "55555520",
            date: "2019-6-16",
            address: '国信安8栋7-7-2',
            num: "19936023434",
            product: "连衣裙",
            productNum: "8",
            price: "99.99",
            express: "12"
        }

    ]
    // 头部导航栏返回按钮
    const toMine = () => {
        Taro.navigateTo({
            url: '/pages/orderManage/orderManage'
        })
    }
    
    // 挂载后 拿数据
    useEffect(() => {
       


        setTit(instance.router.params.name)
        console.log(instance.router.params) // 输出 { id: 2, type: 'test' }
    }, [])
    let instance = getCurrentInstance()




    return (
        <View className="order">
            {/* 导航栏 */}
            <NavigationBar
                canBack={() => toMine}
                navigationTitle='订单详情'
                button={true}
                buttonIconType='ri'
                buttonIcon='arrow-left-s-line'
                buttonIconSize='30px'
                buttonIconColor='#ffffff'
                buttonBGC='#00000050'
            ></NavigationBar>
            <NavigationPlace></NavigationPlace>

            <View>
                {/* 标题 */}
                <View className="tit">
                    <Text>{tit}</Text>
                    {change()}
                </View>
                {/* 内容 */}
                {data2.map((v, i) => {
                    return (
                        <View className="con" >
                            <View>
                                <image src={v.src}></image>
                            </View>
                            <View className="con_1">
                                <view className="con_2 t-l">
                                    <Text>订单编号：{v.name}</Text>
                                    <Text className="t_2">下单时间：{v.date}</Text>
                                    <Text>收货地址：{v.address}</Text>
                                    <Text>下单电话：{v.num}</Text>
                                    <Text>商品名称：{v.product}</Text>
                                    <Text>商品数量：{v.productNum}</Text>
                                    <Text>实付金额：{v.price}</Text>
                                    <Text>快递费用：{v.express}</Text>
                                </view>
                            </View>
                        </View>
                    )
                })}
            </View>
        </View>

    )

}

export default orderCheck;